<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跑马灯</title>
	<style>
		#gun{
            width: 400px;
            line-height: 40px;
            font-size: 40px;
            border: 1px solid #f00;
            margin:0 auto;
            overflow: hidden;
            /*overflow: scroll;*/
        }

        #gung{
            width: 400px;
            height: 40px;
            line-height: 40px;
            font-size: 40px;
            border: 1px solid #00f;
            margin:0 auto;
            overflow: hidden;
            color: #f00;
            /*overflow: scroll;*/
        }

		#shan{
			width: 800px;
            height: 40px;
            line-height: 40px;
            font-size: 40px;
            /*border: 1px solid #00f;*/
            margin:0 auto;
            /*overflow: hidden;*/
            color: #000;
		}
	</style>

</head>
<body>
	<div id="gun">chunmianbujuexiao,chuchuwentiniao.</div>
	<div id="gung">江南皮革厂，江南皮革厂倒闭了！王八蛋XXX带着他的小姨子跑了!欠下了七点五个亿！七点五个亿！！！</div>
	<div id="shan">JavaScript is very interseting!</div>

	<script>
		var gun = document.getElementById('gun');
		var gung = document.getElementById('gung');
		var shan = document.getElementById('shan')

		var str = gun.innerHTML;
		var str2;
		var str3 = shan.innerHTML;
		var i = 0;
		// console.log(str2);

		setInterval(run,100);

		function run(){
            gun.scrollLeft += 10;
            str = str.split('');
            str.push(str.shift());
            str = str.join('');
            gun.innerHTML = str;
        }

        setInterval(function(){
			str2 = gung.innerHTML;
        	gung.innerHTML = str2.substr(1) + str2.charAt(0);
        },100);

        setInterval(function(){
        	if(i>=str3.length) i=0;
			shan.innerHTML = show(i,str3);
			i++;
        },200);

        function show(i,str3){
        	var strr = str3.substr(0,i);
        	strr += '<b style="font-size:60px; color:#f00;">' + str3[i] + '</b>';
        	strr += str3.substr(i+1);
        	return strr;
        }
        
	</script>

</body>
</html>